<script setup lang="ts">
import { reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import addPlan from '@/assets/image/plan/add_plan.png';

// 引入图片
import zhuozhengyuan from '@/assets/image/plan/place/zhuozhengyuan.jpg';
import guanqianjie from '@/assets/image/plan/place/guanqianjie.jpg';
import suzhoubowuguan from '@/assets/image/plan/place/suzhoubowuguan.jpg';
import loumen from '@/assets/image/plan/place/loumen.jpg';
import pinjianglu from '@/assets/image/plan/place/pinjianglu.jpg';
import pipa from '@/assets/image/plan/place/pipa.jpg';
import shizilin from '@/assets/image/plan/place/shizilin.jpg';

import img01 from '@/assets/image/plan/place/01.jpg';
import img02 from '@/assets/image/plan/place/02.jpg';
import img03 from '@/assets/image/plan/place/03.jpg';
import img04 from '@/assets/image/plan/place/04.jpg';
import img05 from '@/assets/image/plan/place/05.jpg';

const router = useRouter();

const state = reactive({
  overlayShow: false,
  imgSrc: addPlan,
  panelHeight: Math.round(0.6 * window.innerHeight),
  clickedList: [0, 1, 2, 3, 4] as Array<number>,
  activeNames: [0],
});

const anchors = [
  100,
  Math.round(0.4 * window.innerHeight),
  Math.round(0.6 * window.innerHeight),
];

const palceList = [
  zhuozhengyuan,
  guanqianjie,
  suzhoubowuguan,
  shizilin,
  pinjianglu,
  loumen,
  pipa,
];
const palceClickedList = [
  { src: img01, text: '直线1.5公里' },
  { src: img02, text: '直线1.5公里' },
  { src: img03, text: '直线1.5公里' },
  { src: img04, text: '直线1.5公里' },
  { src: img05, text: '直线1.5公里' },
];
const palceSimList = [
  ['拙政园', '观前街', '苏州博物馆', '狮子林', '平江路历史街区'],
  ['寒山寺', '山塘街', '金鸡湖'],
];

const planClick = () => {
  loading();
  state.panelHeight = 100;
};

const addPlace = (value: number) => {
  let values = [...state.clickedList] as Array<number>;
  if (!values.includes(value)) {
    values.push(value);
    state.clickedList = values;
  }
};

const isClicked = computed(() => {
  return (num: number) => {
    return state.clickedList.includes(num) ? true : false;
  };
});

const loading = (fn?: () => void) => {
  state.overlayShow = true;
  setTimeout(() => {
    state.overlayShow = false;
    fn && fn();
  }, 200);
};
onMounted(() => {
  loading();
});
</script>

<template>
  <div class="bg-img">
    <img :src="state.imgSrc" />
    <div
      class="navigateBack"
      @click="
        () => {
          router.go(-1);
        }
      "
    ></div>
    <div class="click_place" @click="planClick"></div>
    <div class="swipe_box">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(src, index) in palceList">
          <img :src="src" />
          <div class="add_btn" @click="addPlace(index)"></div>
          <div
            class="clicked"
            :style="{ display: isClicked(index) ? 'block' : 'none' }"
          >
            已选择
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
  <van-overlay :show="state.overlayShow">
    <van-loading class="wrapper" type="spinner" />
  </van-overlay>
  <van-floating-panel v-model:height="state.panelHeight" :anchors="anchors">
    <div class="panel_content">
      <div class="header">
        <span>行程标题</span>
      </div>
      <div class="sub_header">
        <span>2成人 0儿童 ></span>
        <div class="date">
          设置出发日期 <img src="@/assets/icon/common/date.svg" />
        </div>
      </div>
      <div class="content" v-if="state.clickedList.length == 0">
        <img src="@/assets/image/plan/nothing.png" />
        <p>还未添加地点哦~</p>
        <span>试试地图选点或点击下方直接添加~</span>
        <div class="footer_box">
          <div
            class="footer"
            @click="
              () => {
                router.push('/addPlace');
              }
            "
          >
            <img class="icon_add" src="@/assets/icon/common/add.svg" />
            <span>添加地点</span>
          </div>
          <div
            class="footer"
            @click="
              () => {
                router.push('/aiPlan');
              }
            "
            :style="{
              backgroundColor: '#2f40d9',
            }"
          >
            <img class="icon_add" src="@/assets/icon/common/ai.svg" />
            <span>智能规划</span>
          </div>
        </div>
      </div>
      <div class="content_place" v-else>
        <van-collapse v-model="state.activeNames">
          <van-collapse-item
            v-for="(list, index) in palceSimList"
            :name="index"
          >
            <template #title>
              <div class="title">
                <div class="circle"><div></div></div>
                <span>第{{ index + 1 }}天</span>
                <span class="span_2">苏州</span>
              </div>
              <ul
                class="place_sim_list"
                v-if="!state.activeNames.includes(index)"
              >
                <li v-for="(item, index) in list">
                  <div class="item">
                    <span>{{ item }}</span>
                    <van-icon name="cross" />
                  </div>
                  <span>-</span>
                </li>
              </ul>
            </template>
            <van-steps
              direction="vertical"
              :active="-1"
              inactive-color="#34495e"
              active-color="#34495e"
            >
              <van-step v-for="item in state.clickedList">
                <img :src="palceClickedList[item].src" />
                <p>{{ palceClickedList[item].text }}</p>
              </van-step>
            </van-steps>
          </van-collapse-item>
        </van-collapse>

        <div class="footer_box">
          <div
            class="footer"
            @click="
              () => {
                router.push('/addPlace');
              }
            "
          >
            <img class="icon_add" src="@/assets/icon/common/add.svg" />
            <span>添加地点</span>
          </div>
          <div
            class="footer"
            @click="
              () => {
                router.push('/savePlan');
              }
            "
          >
            <img class="icon_add" src="@/assets/icon/common/save.svg" />
            <span>保存路径</span>
          </div>
        </div>
      </div>
    </div>
  </van-floating-panel>
</template>
<style scoped lang="scss">
.bg-img {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }
  .search {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 26px;
  }
  .search_box {
    width: 95%;
  }
  .navigateBack {
    position: absolute;
    top: 29px;
    left: 12px;
    width: 40px;
    height: 50px;
    background-color: transparent;
  }
  .click_place {
    position: absolute;
    top: 28%;
    left: 48%;
    width: 80px;
    height: 60px;
    background-color: transparent;
  }
  .swipe_box {
    position: absolute;
    width: 100%;
    bottom: 100px;
    .my-swipe .van-swipe-item {
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .add_btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background-color: transparent;
      }
      .clicked {
        position: absolute;
        font-size: 13px;
        // font-weight: bold;
        color: #fff;
        bottom: 20px;
        left: 30px;
        padding: 5px 10px;
        background-color: rgba(255, 244, 244, 0.3);
        border-radius: 20px;
      }
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.panel_content {
  padding: 0 20px;
  color: #3a3a3a;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    padding-bottom: 3px;
    span {
      font-weight: bold;
      font-size: 18px;
    }
  }
  .sub_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #595959;
    span {
      font-weight: bold;
    }
    .date {
      display: flex;
      align-items: center;
      font-weight: bold;
    }
    img {
      width: 28px;
      height: 28px;
    }
  }
  .content {
    box-sizing: border-box;
    padding: 12px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: auto;
    }
    p {
      font-size: 20px;
      font-weight: bold;
    }
    span {
      color: #595959;
    }
  }
  .content_place {
    width: 100%;
    color: #3a3a3a;
    padding-bottom: 30px;
    img {
      width: 100%;
      height: auto;
    }
    p {
      font-size: 14px;
      color: #949494;
      margin-top: 4px;
    }
    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      .circle {
        margin-right: 4px;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #377bfa;
        border-radius: 50%;
        div {
          width: 8px;
          height: 8px;
          background-color: #fff;
          border-radius: 50%;
        }
      }
      span {
        font-weight: bold;
        font-size: 15px;
        color: #377bfa;
      }
      .span_2 {
        position: relative;
        margin-left: 8px;
        padding-left: 8px;
        color: #3a3a3a;
      }
      .span_2::before {
        position: absolute;
        content: '';
        left: 0;
        top: 50%;
        width: 1px;
        height: 50%;
        background-color: #949494;
        transform: translateY(-50%);
      }
    }
    .place_sim_list {
      padding: 6px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      li {
        display: flex;
        align-items: center;
        margin: 4px 0;
        span {
          color: #949494;
          padding: 0 2px;
        }
        .item {
          font-size: 14px;
          padding: 2px 8px;
          background-color: #eff4ff;
          color: rgb(117, 117, 117);
          border-radius: 20px;
          span {
            color: rgb(46, 75, 188);
            margin-right: 4px;
          }
        }
      }
    }
  }
  .footer_box {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .footer {
    margin-top: 20px;
    background-color: #00bf69;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 16px 3px 6px;
    border-radius: 30px;
    .icon_add {
      width: 40px;
      height: 40px;
    }
    span {
      margin-left: 2px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }
}
.van-collapse-item__content {
  padding: 0 !important;
}
</style>
